// @vue/cli 手脚架的配置文件
// 暴露一个模块，遵循CommonJS 规范

// 判断是否为生产环境
const idProd = process.env.NODE_ENV === 'production'

// 导入webpack插件，不需要安装，vue-cli里面已经集成好了
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
let plugins = [] // webapck的插件
let cdn = { css: [], js: [] } // cdn资源
let externals = {} // 排除项
if (idProd) {
  plugins = [new BundleAnalyzerPlugin()]
  cdn = {
    css: [
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css',
      'https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.staticfile.org/vue/2.5.22/vue.min.js',
      'https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js',
      'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',
      'https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js',
      'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js',
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
      'https://cdn.staticfile.org/quill/1.3.4/quill.min.js',
      'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js',
      'https://cdn.staticfile.org/element-ui/2.8.2/index.js'
    ]
  }
  externals = {
    // 键 是 包名
    // 值 是 全局引入的cdn资源暴露在window中变量名称，这个一定要注意，确保正确，否则会因为找不到而使得项目无法打包
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
  }
} else {
  cdn = { css: [], js: ['https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js'] }
  externals = {
    echarts: 'echarts'
  }
}

module.exports = {
  // 部署路径，我们可以通过判断是否为生产环境，如果是生产环境就让他为./这样就可以直接打开dist里面的内容
  publicPath: idProd ? './' : '/', // 默认是/
  outputDir: 'dist', // 默认是dist   打包出口文件夹
  assetsDir: 'static', // 默认是 空 ，存放静态文件文件夹
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径
  devServer: {
    host: '127.0.0.1', // 运行主机地址
    port: 3000, // 运行端口
    open: true // 自动打开浏览器
  },
  // 设置webpack的相关配置信息 【对象式配置】
  configureWebpack: {
    plugins: plugins, // 配置webpack的插件
    externals: externals // 排除编译项
  },
  // 设置webpack的相关配置信息 【函数式配置】
  chainWebpack: config => {
    // 配置 webpack-plugin-html 插件中的内容。 args[0] 表示配置信息，增加cdn变量
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args // 需要return
    })
  }

}
